import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import api from '../../api'
import { Form, Input, message, Modal, Select } from 'antd'

const PackageAcoins = (props, ref) => {
    const [open, setopen] = useState(false)
    // 和数据双向绑定
    const [form] = Form.useForm()

    // 确认按钮
    const handleOk = () => {
        if (form.getFieldValue()._id) {
            updateData()
        } else {
            addData()
        }
    }
    // 点击关闭弹窗
    const handleDelete = () => {
        setopen(false)
    }
    // 点击打开弹窗
    const showMod = (record) => {

        if (record) {
            form.setFieldsValue(record)
        } else {
            form.resetFields()
        }
        setopen(true)
    }
    // 新增套餐
    const addData = async () => {
        //  getFieldsValue 获取当前表单所有的值传给 formData
        const formData = form.getFieldsValue()
        const res = await api.meal.add({
            ...formData,
        })
        console.log('新增', res);
        if (res.meta.status == 200) {
            // 接受父组件的方法更新列表
            props.getmealData()
            setopen(false)
            message.open({
                type: 'success',
                content: '新增数据成功'
            })
        } else {
            message.open({
                type: 'error',
                content: '新增数据失败'
            })
        }
    }
    // 修改套餐
    const updateData = async () => {
        const res = await api.meal.update({
            //  getFieldValue 获取当前表单所有的值
            ...form.getFieldValue()
        })
        if (res.meta.status == 200) {
            // 接受父组件的方法更新列表
            props.getmealData()
            setopen(false)
            message.open({
                type: 'success',
                content: '新增修改成功'
            })
        }

    }
    // 暴露方法给父组件
    useImperativeHandle(ref, () => {
        // 返回值就是暴露给父组件的数据
        return {
            showMod
        }
    })
    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };

    return (
        <>
            <Modal title={form.getFieldValue()._id ? '修改套餐' : '新增套餐'} open={open} onOk={handleOk} onCancel={handleDelete}>
                <Form labelCol={{ style: { width: 80 } }} form={form}>
                    <Form.Item label='月份数' name='mouth'>
                        <Input />
                    </Form.Item>
                    <Form.Item label='折扣价' name='salePrice'>
                        <Input />
                    </Form.Item>
                    <Form.Item label='原价' name='normalPrice'>
                        <Input />
                    </Form.Item>
                    <Form.Item label='是否推荐' name='type'>
                        <Select
                            defaultValue="是否推荐"
                            style={{
                                width: 120,
                            }}
                            onChange={handleChange}
                            options={[
                                {
                                    value: 1,
                                    label: '推荐',
                                },
                                {
                                    value: 0,
                                    label: '不推荐',
                                },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label='套餐名' name='name'>
                        <Input />
                    </Form.Item>
                    <Form.Item label='月份数' name='mouth'>
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default forwardRef(PackageAcoins) 